import { Suspense, lazy } from 'react'
import { Outlet } from 'react-router-dom'

import AuthGuard from '../components/AuthGuard'
import CircleLoading from '@/components/loading/CircleLoading'

import { AppRouteObject } from '#/router'

const Page403 = lazy(() => import('@/pages/Error/403'))
const Page404 = lazy(() => import('@/pages/Error/404'))
const Page500 = lazy(() => import('@/pages/Error/500'))

export const ErrorRoutes: AppRouteObject = {
  element: (
    <AuthGuard>
      <Suspense fallback={<CircleLoading />}>
        <Outlet />
      </Suspense>
    </AuthGuard>
  ),
  children: [
    { path: '403', element: <Page403 /> },
    { path: '404', element: <Page404 /> },
    { path: '500', element: <Page500 /> }
  ]
}
